<template>
  <div class="w-full">
    <!-- 欢迎区域 -->
    <section class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white rounded-xl mb-8 text-center py-12">
      <div class="max-w-4xl mx-auto px-4">
        <h1 class="text-4xl md:text-5xl font-bold mb-4">欢迎来到我的博客</h1>
        <p class="text-xl mb-8 opacity-90">分享技术知识，记录学习心得</p>
        <div class="flex justify-center gap-8 md:gap-12">
          <div class="text-center">
            <span class="block text-3xl font-bold text-yellow-300">50+</span>
            <span class="text-sm opacity-80">文章</span>
          </div>
          <div class="text-center">
            <span class="block text-3xl font-bold text-yellow-300">1000+</span>
            <span class="text-sm opacity-80">访问</span>
          </div>
          <div class="text-center">
            <span class="block text-3xl font-bold text-yellow-300">5年+</span>
            <span class="text-sm opacity-80">经验</span>
          </div>
        </div>
      </div>
    </section>

    <!-- 最新文章 -->
    <section class="mb-8">
      <h2 class="text-3xl font-bold text-gray-800 mb-6 pb-2 border-b-2 border-indigo-500">最新文章</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <article v-for="post in latestPosts" :key="post.id"
          class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
          <NuxtLink :to="`/blog/${post.slug}`" class="block h-48 overflow-hidden">
            <img :src="post.image" :alt="post.title"
              class="w-full h-full object-cover transition-transform duration-300 hover:scale-105">
          </NuxtLink>
          <div class="p-6">
            <div class="flex justify-between items-center mb-3 text-sm">
              <span class="text-indigo-500 font-medium">{{ post.category }}</span>
              <span class="text-gray-500">{{ post.date }}</span>
            </div>
            <NuxtLink :to="`/blog/${post.slug}`" class="block">
              <h3 class="text-xl font-semibold text-gray-800 mb-3 line-clamp-2 hover:text-indigo-600 transition-colors duration-300">{{ post.title }}</h3>
            </NuxtLink>
            <p class="text-gray-600 mb-4 line-clamp-3">{{ post.excerpt }}</p>
            <div class="flex flex-wrap gap-2 mb-4">
              <span v-for="tag in post.tags" :key="tag"
                class="bg-gray-100 text-indigo-500 px-2 py-1 rounded-lg text-xs">
                {{ tag }}
              </span>
            </div>
            <NuxtLink :to="`/blog/${post.slug}`"
              class="text-indigo-500 font-medium hover:text-indigo-600 transition-colors duration-300">
              阅读更多 →
            </NuxtLink>
          </div>
        </article>
      </div>
    </section>

    <!-- 关于我 -->
    <section class="bg-white rounded-xl p-8 shadow-sm">
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 items-center">
        <div class="lg:col-span-2">
          <h2 class="text-3xl font-bold text-gray-800 mb-4">关于我</h2>
          <p class="text-gray-600 leading-relaxed mb-6">
            我是一名热爱技术的前端开发者，专注于 Vue.js、React 和现代 Web 技术。通过这个博客，我希望能够分享我的学习经验和技术见解，与大家一起成长。
          </p>
          <div class="flex flex-wrap gap-3">
            <span class="bg-indigo-500 text-white px-4 py-2 rounded-full text-sm">Vue.js</span>
            <span class="bg-indigo-500 text-white px-4 py-2 rounded-full text-sm">React</span>
            <span class="bg-indigo-500 text-white px-4 py-2 rounded-full text-sm">JavaScript</span>
            <span class="bg-indigo-500 text-white px-4 py-2 rounded-full text-sm">TypeScript</span>
            <span class="bg-indigo-500 text-white px-4 py-2 rounded-full text-sm">CSS3</span>
            <span class="bg-indigo-500 text-white px-4 py-2 rounded-full text-sm">Node.js</span>
          </div>
        </div>
        <div class="flex justify-center">
          <div
            class="w-32 h-32 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-full flex items-center justify-center text-4xl">
            👨‍💻
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
// 从后端获取最新文章数据
const { data: postsData } = await useFetch('/api/posts', {
  query: {
    limit: 3,
    page: 1
  }
})

const latestPosts = computed(() => postsData.value?.posts || [])
</script>